// 设备独立像素: 通过设备独立像素可以计算出来一个css像素被几个物理像素渲染

// 屏幕分辨率的宽度 / 设备独立像素的宽度  ==> 像素比

// 获取像素比: window.devicePixelRatio

// 位图和矢量图的区别:
// 1. 位图由位图像素组成,矢量图是动态计算出来
// 2. 位图会失真,矢量图不会失真
// 3. 制作色彩丰富,线条复杂的图片,位图相对更容易,矢量图相对成本高

// 在移动端要解决位图失真的问题: 利用2x或3x图, 保证一个位图像素被一个物理像素渲染

移动端的三个视口: 
布局视口: 影响到页面布局 默认980px 
视觉视口: 不影响页面布局 和缩放有关
理想视口: 改变布局视口的宽度, 一般会把布局视口改为设备独立像素的宽度

<meta name="viewport" content="width=device-width, initial-scale=1" />

width的取值范围: 数字, device-width
initial-scale的公式:  设备独立像素的宽度/布局视口的宽度
如果这两个属性计算的布局视口宽度不一致,按较大的那个值计算

rem适配

方式一: 
1. 动态计算根标签的字体大小 

 当前设备独立像素的宽度 * 100 / 设计稿的宽度 

2. 写具体的样式时: 设计值 / 100 单位使用rem
  

方式二: 

1. 动态计算根标签的字体大小

当前设备独立像素的宽度 / 10

2. 写具体的样式时:

设计值 / (设计稿的宽度 / 10)






